<template>
  <div class="table-box">
    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">司机管理</span>
          <el-button type="primary" :icon="CirclePlus" @click="openDriverForm('新增司机')">
            新增司机
          </el-button>
        </div>
      </template>
      
      <ProTable
        ref="driverTableRef"
        :columns="driverColumns"
        :search-columns="driverSearchColumns"
        :request-api="getDriverList"
        row-key="id"
      >
        <template #operation="{ row }">
          <el-button
            type="primary"
            link
            :icon="EditPen"
            @click="openDriverForm('编辑司机', row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            :icon="Delete"
            @click="deleteDriver(row)"
          >
            删除
          </el-button>
        </template>
      </ProTable>
    </el-card>
    
    <!-- 司机表单 -->
    <DriverForm ref="driverFormRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CirclePlus, EditPen, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ProTable from '@/components/ProTable/index.vue';
import {
  getDriverUserList,
  addUser,
  editUser,
  deleteUser
} from '@/api/modules/datainfo/driverUser';
import { useHandleData } from '@/hooks/useHandleData';
import DriverForm from './components/DriverForm.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { UserQuery, UserInfo } from '@/api/types/datainfo/driverUser';

defineOptions({
  name: 'DriverListView'
});

// 表格引用
const driverTableRef = ref<ProTableInstance>();

// 表单引用
const driverFormRef = ref<InstanceType<typeof DriverForm>>();

// 司机表格配置项
const driverColumns: ColumnProps<UserInfo>[] = [
  { prop: 'username', label: '用户名', width: 200 },
  { prop: 'nickname', label: '昵称', width: 200 },
  { prop: 'phone', label: '手机号', width: 200 },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '更新时间', width: 180 },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
];

// 司机搜索条件项
const driverSearchColumns: SearchProps[] = [
  { prop: 'username', label: '用户名', el: 'input' },
  { prop: 'nickname', label: '昵称', el: 'input' },
  { prop: 'phone', label: '手机号', el: 'input' }
];

// 获取司机列表（分页）
const getDriverList = (params: UserQuery) => {
  return getDriverUserList(params);
};

// 打开司机表单（新增/编辑）
const openDriverForm = (title: string, row: Partial<UserInfo> = {}) => {
  const params = {
    title,
    row: { ...row },
    api: row.id ? editUser : addUser,
    getTableList: driverTableRef.value?.getTableList
  };
  driverFormRef.value?.acceptParams(params);
};

// 删除司机
const deleteDriver = async (row: UserInfo) => {
  ElMessageBox.confirm(`确定要删除司机【${row.nickname || row.username}】吗？`, '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await useHandleData(deleteUser, { ids: [row.id!] }, `删除【${row.nickname || row.username}】司机`);
      driverTableRef.value?.getTableList();
    } catch (error) {
      console.error('删除司机失败:', error);
    }
  }).catch(() => {
    // 取消删除
  });
};
</script>

<style scoped lang="scss">
.table-box {
  padding: 20px;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.font-medium {
  font-weight: 500;
}
</style>